<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轻云酒店 后台登录系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" th:href="@{/static/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/static/lib/font-awesome-4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.4/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/lib/captcha/css/verify.css}">
    <style>
        .main-body {
            top: 50%;
            left: 50%;
            position: absolute;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            overflow: hidden;
        }

        .login-main .login-bottom .center .item input {
            display: inline-block;
            width: 227px;
            height: 22px;
            padding: 0;
            position: absolute;
            border: 0;
            outline: 0;
            font-size: 14px;
            letter-spacing: 0;
        }

        .login-main .login-bottom .center .item .icon-1 {
            background: url(/static/images/icon-login.png) no-repeat 1px 0;
        }

        .login-main .login-bottom .center .item .icon-2 {
            background: url(/static/images/icon-login.png) no-repeat -54px 0;
        }

        .login-main .login-bottom .center .item .icon-3 {
            background: url(/static/images/icon-login.png) no-repeat -106px 0;
        }

        .login-main .login-bottom .center .item .icon-4 {
            background: url(/static/images/icon-login.png) no-repeat 0 -43px;
            position: absolute;
            right: -10px;
            cursor: pointer;
        }

        .login-main .login-bottom .center .item .icon-5 {
            background: url(/static/images/icon-login.png) no-repeat -55px -43px;
        }

        .login-main .login-bottom .center .item .icon-6 {
            background: url(/static/images/icon-login.png) no-repeat 0 -93px;
            position: absolute;
            right: -10px;
            margin-top: 8px;
            cursor: pointer;
        }

        .login-main .login-bottom .tip .icon-nocheck {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            border: solid 1px #9abcda;
            position: relative;
            top: 2px;
            margin: 1px 8px 1px 1px;
            cursor: pointer;
        }

        .login-main .login-bottom .tip .icon-check {
            margin: 0 7px 0 0;
            width: 14px;
            height: 14px;
            border: none;
            background: url(/static/images/icon-login.png) no-repeat -111px -48px;
        }

        .login-main .login-bottom .center .item .icon {
            display: inline-block;
            width: 33px;
            height: 22px;
        }

        .login-main .login-bottom .center .item {
            width: 288px;
            height: 35px;
            border-bottom: 1px solid #dae1e6;
            margin-bottom: 35px;
        }

        .login-main {
            width: 428px;
            position: relative;
            float: left;
        }

        .login-main .login-top {
            height: 117px;
            background-color: #c2a095;
            border-radius: 12px 12px 0 0;
            font-family: SourceHanSansCN-Regular;
            font-size: 30px;
            font-weight: 400;
            font-stretch: normal;
            letter-spacing: 0;
            color: #fff;
            line-height: 117px;
            text-align: center;
            overflow: hidden;
            -webkit-transform: rotate(0);
            -moz-transform: rotate(0);
            -ms-transform: rotate(0);
            -o-transform: rotate(0);
            transform: rotate(0);
        }

        .login-main .login-top .bg1 {
            display: inline-block;
            width: 74px;
            height: 74px;
            background: #fff;
            opacity: .1;
            border-radius: 0 74px 0 0;
            position: absolute;
            left: 0;
            top: 43px;
        }

        .login-main .login-top .bg2 {
            display: inline-block;
            width: 94px;
            height: 94px;
            background: #fff;
            opacity: .1;
            border-radius: 50%;
            position: absolute;
            right: -16px;
            top: -16px;
        }

        .login-main .login-bottom {
            width: 428px;
            background: #fff;
            border-radius: 0 0 12px 12px;
            padding-bottom: 53px;
        }

        .login-main .login-bottom .center {
            width: 288px;
            margin: 0 auto;
            padding-top: 40px;
            padding-bottom: 15px;
            position: relative;
        }

        .login-main .login-bottom .tip {
            clear: both;
            height: 16px;
            line-height: 16px;
            width: 288px;
            margin: 0 auto;
        }

        body {
            background: url(/static/images/bg.jpg) 0% 0% / cover no-repeat;
            position: static;
            font-size: 12px;
        }

        input::-webkit-input-placeholder {
            color: #a6aebf;
        }

        input::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #a6aebf;
        }

        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #a6aebf;
        }

        input:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #a6aebf;
        }

        input:-webkit-autofill { /* 取消Chrome记住密码的背景颜色 */
            -webkit-box-shadow: 0 0 0 1000px white inset !important;
        }

        html {
            height: 100%;
        }

        .login-main .login-bottom .tip {
            clear: both;
            height: 16px;
            line-height: 16px;
            width: 288px;
            margin: 0 auto;
        }

        .login-main .login-bottom .tip .login-tip {
            font-family: MicrosoftYaHei;
            font-size: 12px;
            font-weight: 400;
            font-stretch: normal;
            letter-spacing: 0;
            color: #9abcda;
            cursor: pointer;
        }

        .login-main .login-bottom .tip .forget-password {
            font-stretch: normal;
            letter-spacing: 0;
            color: #c2a095;
            text-decoration: none;
            position: absolute;
            right: 62px;
        }

        .login-main .login-bottom .login-btn {
            width: 288px;
            height: 40px;
            background-color: #c2a095;
            border-radius: 16px;
            margin: 24px auto 0;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 14px;
            letter-spacing: 0;
            cursor: pointer;
            border: none;
        }

        .login-main .login-bottom .center .item .validateImg {
            position: absolute;
            right: 1px;
            cursor: pointer;
            height: 36px;
            border: 1px solid #e6e6e6;
        }

        .footer {
            left: 0;
            bottom: 0;
            color: #fff;
            width: 100%;
            position: absolute;
            text-align: center;
            line-height: 30px;
            padding-bottom: 10px;
            text-shadow: #000 0.1em 0.1em 0.1em;
            font-size: 14px;
        }

        .padding-5 {
            padding: 5px !important;
        }

        .footer a, .footer span {
            color: #fff;
        }

        @media screen and (max-width: 428px) {
            .login-main {
                width: 360px !important;
            }

            .login-main .login-top {
                width: 360px !important;
            }

            .login-main .login-bottom {
                width: 360px !important;
            }
        }
    </style>
</head>
<body>
<div class="main-body">
    <div class="login-main">
        <div class="login-top">
            <span> 轻云酒店 后台登录系统</span>
        </div>
        <form class="layui-form login-bottom" lay-filter="form-val">
            <div class="center">

                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">
                          <i class="layui-icon layui-icon-email" style="font-size: 20px"></i>
                        </div>
                        <input type="text" id="emailInput" name="email" lay-verify="email" placeholder="请输入邮箱" class="layui-input">
                        <div class="layui-input-suffix">
                            <button class="layui-btn layui-btn-primary" id="sendCodeButton" onclick="sendcode()">发送验证码</button>
                        </div>
                    </div>
                  <div style="margin-top: 25px">
                  <input type="text" name="code" placeholder="文本框" class="layui-input">
                  </div>
                </div>

                <div class="layui-form-item"
                     style="text-align:center; width:100%;height:100%;margin-top:10px; box-sizing: content-box">
                    <button  class="login-btn " id="btn" lay-submit=""
                            lay-filter="login" STYLE="background-color: #c2a095">立即登录
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    let ctx = '[[${#request.contextPath}]]';
</script>
<script th:src="@{/static/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/layui-v2.8.4/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/jq-module/jquery.particleground.min.js}" charset="utf-8"></script>
<script>

    let bool ;
    function sendcode(){
        let email = $("#emailInput").val();
        let data = {
            "email": email,
        };

        //     校验验证码是否符合格式
        let emailRegex = /^\d{6,10}@[a-zA-Z]{2,7}\.[a-zA-Z]{2,7}$/;
        if(! email.match(emailRegex)){
            alert("邮箱输入格式有误");
            return;
        }

        //    格式正确，点击发送验证码后按钮变成倒计时
        $("#sendCodeButton").attr("disabled",true);
        // 60s后重新发送
        $("#sendCodeButton").text("60s后重新发送");
        let time = 60;
        // 定时器
        let timer = setInterval(function () {
            time--;
            $("#sendCodeButton").text(time+"s后重新发送");
            if(time == 0){
                clearInterval(timer);
                $("#sendCodeButton").text("发送验证码");
                $("#sendCodeButton").attr("disabled",false);
            }
        },1000);

        // 发送请求
        // bool = true;
        fetch(ctx+"/sendCode",{
            headers:{
                'Content-Type': 'application/json'
            },method:"POST",
            body:JSON.stringify(data)
        }).then(function (response) {
            return response.json();
        }).then(function (data) {
            if(data.code == 200){
                alert("发送成功");
                bool = true;
            }else{
                alert("发送失败");
                bool = false;
            }
        });
        return false;
    }

    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer;
        // 进行登录操作
        form.on('submit(login)', function () {
            // jquery 触发点击事件
            let formData = form.val('form-val');

            console.log(formData);
            // 验证码校验
            if (bool) {
                fetch(ctx + "/emailLogin", {
                    headers: {
                        'Content-Type': 'application/json'
                    }, method: "POST",
                    body: JSON.stringify(formData)
                }).then(function (response) {
                    return response.json();
                }).then(function (data) {
                    if (data.code == 200) {
                        alert("登录成功");
                        window.location.href = ctx + "/LightCloudHome";
                    } else {
                        alert("登录失败");
                    }
                })
            } ;
            return false;
        });
    });
</script>
</body>
</html>